<template>
  <el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">审核详情</span>
    </template>
  </el-page-header>
  <el-descriptions
    class="margin-top"
    style="
      border-radius: 10px;
      margin: 20px 130px;
      width: 73%;
      box-shadow: 5px 5px 10px rgba(98, 106, 239, 0.5);
    "
    :column="3"
    size="large"
    border
  >
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          员工姓名
        </div>
      </template>
      {{ empName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ deptName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          岗位
        </div>
      </template>
      {{ position }}
    </el-descriptions-item>
  </el-descriptions>
  <el-card class="role-card" v-if="WaitStateList.scoreState == 1">
    <template #header>
      <div class="card-header">
        <span>评分项目</span>
        <el-icon><Connection/></el-icon>
      </div>
    </template>
    <ScoreThird
      :scoreList="scoreList"
	  :scoreExamine="form.scoreExamine"
	  :update="update"
      v-if="WaitStateList.scoreState == 1"
    ></ScoreThird>
    <div style="width: 100%; float: right">
      <el-input
        v-model="form.opinion1"
        type="textarea"
        placeholder="驳回意见,如审批通过无需填写"
        style="width: 500px; float: right"
      />
    </div>
    <el-radio-group
      v-model="form.scoreExamine"
      v-if="WaitStateList.scoreState == 1"
      style="margin:10px 0px 30px; float: right"
      size="large"
    >
      <el-radio-button label="1" >通过</el-radio-button>
    <el-radio-button label="2" >驳回</el-radio-button>
    </el-radio-group>
  </el-card>

<el-card class="role-card" v-if="WaitStateList.pieceState == 1">
    <template #header>
      <div class="card-header">
        <span>计件项目</span>
        <el-icon><MessageBox/></el-icon>
      </div>
    </template>
  <PieceThird
    :pieceList="pieceList"
    v-if="WaitStateList.pieceState == 1"
  ></PieceThird>
  <div style="width: 100%; float: right">
      <el-input
        v-model="form.opinion2"
        type="textarea"
        placeholder="驳回意见,如审批通过无需填写"
        style="width: 500px; float: right"
      />
    </div>
  <el-radio-group
    v-model="form.pieceExamine"
    v-if="WaitStateList.pieceState == 1"
    style="margin:10px 0px 30px;float: right"
    size="large"
  >
    <el-radio-button label="1" >通过</el-radio-button>
    <el-radio-button label="2" >驳回</el-radio-button>
  </el-radio-group>
  </el-card>

<el-card class="role-card" v-if="WaitStateList.kpiState == 1">
    <template #header>
      <div class="card-header">
        <span>提成项目</span>
        <el-icon><DataLine/></el-icon>
      </div>
    </template>
  <KpiThird :kpiList="kpiList" v-if="WaitStateList.kpiState == 1"></KpiThird>
  <div style="width: 100%; float: right">
      <el-input
        v-model="form.opinion3"
        type="textarea"
        placeholder="驳回意见,如审批通过无需填写"
        style="width: 500px; float: right"
      />
    </div>
  <el-radio-group
    v-model="form.kpiExamine"
    v-if="WaitStateList.kpiState == 1"
    style="margin:10px 0px 30px;float: right"
    size="large"
  >
    <el-radio-button label="1" >通过</el-radio-button>
    <el-radio-button label="2" >驳回</el-radio-button>
  </el-radio-group>
</el-card>

<el-card class="role-card" v-if="WaitStateList.okrState == 1">
    <template #header>
      <div class="card-header">
        <span>Okr项目</span>
        <el-icon><Finished/></el-icon>
      </div>
    </template>
  <OkrThird :okrList="okrList" v-if="WaitStateList.okrState == 1"></OkrThird>
  <div style="width: 100%; float: right">
      <el-input
        v-model="form.opinion4"
        type="textarea"
        placeholder="驳回意见,如审批通过无需填写"
        style="width: 500px; float: right"
      />
    </div>
  <el-radio-group
    v-model="form.okrExamine"
    v-if="WaitStateList.okrState == 1"
    style="margin:10px 0px 30px;float: right"
    size="large"
  >
    <el-radio-button label="1" >通过</el-radio-button>
    <el-radio-button label="2" >驳回</el-radio-button>
  </el-radio-group>
</el-card>
<el-card class="role-card" v-if="WaitStateList.pieceState != 1 
      && WaitStateList.kpiState != 1
      && WaitStateList.scoreState != 1
      && WaitStateList.okrState != 1
      && WaitStateList.totalState == 1">
  <el-empty description="绩效考核数据为空" />
</el-card>
  <div>
    <el-button
      type="primary"
      @click="submitForm"
      style="width:120px;height:40px;margin: 20px 35px; float: right;"
      >完成审批</el-button
    >
  </div>
</template>

<script  setup>
import { ref, onBeforeMount, reactive, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { Timer } from "@element-plus/icons-vue";
import { Calendar } from "@element-plus/icons-vue";
import ScoreThird from "./components/scoreThird";
import PieceThird from "./components/pieceThird";
import KpiThird from "./components/kpiThird";
import OkrThird from "./components/okrThird"
import { getThirdTaskDetial, addThirdTaskDetial } from "@/api/resultThird";
import { addResultThirdExamine } from "@/api/task";
import { ElMessage } from "element-plus";

const route = useRoute();
let empId = route.query.empId;
let deptName = route.query.deptName
let empName = route.query.empName;
let position = route.query.position;

const WaitStateList = ref([]);
const scoreList = ref([]);
const pieceList = ref([]);
const kpiList = ref([]);
const okrList = ref([]);


onBeforeMount(() => {
  let empId = route.query.empId;
  let positionId = route.query.positionId;
  getThirdTaskDetial({ empId, positionId }).then((data) => {
    WaitStateList.value = data.data.state[0];
	let item = data.data.score
	for(var i = 0;i <data.data.score.length;i++){
		item[i].grade = (Number(item[i].score)* Number(item[i].scorePercent)/100 * Number(item[i].assessorPercent)/100).toFixed(2) ;
	}
	
	scoreList.value = item;
    pieceList.value = data.data.piece;
    kpiList.value = data.data.kpi;
    okrList.value = data.data.okr;
  });
});

const { proxy } = getCurrentInstance();
const goback = () => {
  proxy.$router.go(-1);
};

const form = reactive({
  empId: route.query.empId,
  positionId: route.query.positionId,
  assessorId: JSON.parse(localStorage.getItem("userInfo")).id,
  scoreExamine: "1",
  pieceExamine: "1",
  kpiExamine: "1",
  okrExamine: "1",
  opinion1: "",
  opinion2: "",
  opinion3: "",
  opinion4: "",
  empScoreList:[],
});

const submitForm = () => {
	if(form.scoreExamine == 2&&form.empScoreList.length == 0){
		ElMessage({
		  message: "请勾选评分驳回条目",
		  type: "error",
		});
		return
	}
		
	
	
	
  addResultThirdExamine(form).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "审批成功",
        type: "success",
      });
      proxy.$router.go(-1);
    }
  });
};

const update = (empList,type)=>{
	switch(type){
		case "score":form.empScoreList = empList;break;
	}
	console.log(form.empScoreList);
}


</script>
<style lang="scss" scoped>
.el-card {
  width: 95%;
  border-radius: 10px;
  margin: 20px auto;
}
:deep(.my-label) {
  background: rgba(98, 106, 239, 0.15) !important;
  color: #626aef !important;
  border: #626aef 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(98, 106, 239, 0.9) !important;
  border: #626aef 2px solid !important ;
}

.el-card ::v-deep .el-card__header {
  border: none;
  height: 20px;
  color: #95d475;
  font-size: 20px;
}
</style>
